<template>
	<view>
		<view class="sx" v-for="v in getArr" :key="v.coupon_id">
			<view class="biaoti">{{v.coupon_type}}</view>
			<view class="neirou">
				<view>可用范围：明区，暗区</view>
				<view class="col">有效期：{{v.coupon_endDateTime}}</view>
			</view>
			<view class="ding" @click="gou(v.coupon_money)">点击使用</view>
		</view>
		
		<view class="sx">
			<view class="biaoti2">双人区日卡</view>
			<view class="neirou">
				<view>可用范围：双人区</view>
				<view class="col">有效期：激活后1小时</view>
			</view>
			<view class="ding2" >暂不可用</view>
		</view>
		</view>
</template>

<script>
import { toRefs, reactive } from 'vue';
import {http} from '@/static/utils/http.js'
export default {
	setup() {
		const data = reactive({
			getArr:[],
			gou: (money) => {
				console.log(money)
				uni.showModal({
				  title: '提示',
				  content:`支付金额: ${money}`,
				  success (res) {
					if (res.confirm) {
					  console.log('用户点击确定')
					} else if (res.cancel) {
					  console.log('用户点击取消')
					}
				  }
				})
			}
		});
		const getCouponStore =()=> {
			http({
				url:'/getCouponStore',
				method:'get'
			})
				.then((res) => {
					data.getArr = res.data.data
				})
				.catch(error => console.lgo(error))
		}
		getCouponStore()
	
		return { ...toRefs(data) };
	}
};
</script>

<style>
page {
	font-size: 26rpx;
	margin: 0;
	padding: 0;
}
.sx {
	margin: 20rpx;
	width: 700rpx;
	height: 160rpx;
	text-align: center;
	box-shadow: darkgray 5px 5px 5px 0;
}
.biaoti {
	float: left;
	width: 175rpx;
	height: 160rpx;
	line-height: 160rpx;
	background: rgb(133, 133, 254);
	color: rgb(255, 249, 252);
}
.biaoti2{
	float: left;
	width: 175rpx;
	height: 160rpx;
	line-height: 160rpx;
	background: #BEBCC8;
	color: white;
}
.neirou {
	float: left;
	width: 350rpx;
	height: 160rpx;
	line-height: 60rpx;
	padding-top: 20rpx;
	color: rgb(51, 51, 51);
}
.col{
	color: rgb(119,115,115);
}
.ding {
	float: left;
	margin: 20rpx 0 0 0;
	width: 160rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-left: 5rpx solid rgb(128, 128, 255);
	color: rgb(128, 128, 255);
}
.ding2{
	float: left;
	margin: 20rpx 0 0 0;
	width: 160rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-left: 5rpx solid rgb(128, 128, 255);
	color: #BEBCC8;
}
</style>